<template>
  <CommonPanel title="今日车辆类型统计">
     <div class="content-box1">
      <div class="content-box1_top">总事件量
        <span>{{total}}</span>
      </div>
      <div class="content-box1_bottom">
        <div class="echart-box">
          <CommonChart ref="myChart" :option="option" />
        </div>
        <div class="connent-box">
          <div :class="index===0?'connent-box_top':'connent-box_bottom'" v-for="(item,index) in data?.vehicleType" :key="index">
            <span>{{item?.name}}</span><span style="margin-left: 22%;">{{ item.num }}</span> <span style="margin-left: 2%;">{{ Math.round(item.num/total*100)}}%</span>
          </div>
          <!-- <div class="connent-box_top">
            <span>大型车</span><span style="margin-left: 22%;">400</span> <span style="margin-left: 2%;">20%</span>
          </div>
          <div class="connent-box_bottom">
            小型车
          </div>
          <div class="connent-box_bottom">
            其他
          </div>
          <div class="connent-box_bottom">
            摩托车
          </div> -->
        </div>
      </div>
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from 'echarts';
import { computed, onMounted, ref, watch } from "vue";
import iconPartTD from "@/assets/build-image/icon_part_td@2x.png";
import iconPartSzjc from "@/assets/build-image/icon_part_szjc@2x.png";
import iconPartQt from "@/assets/build-image/icon_part_qt@2x.png";
import { typeMoney } from "../cfg";
import { defineProps } from "vue";
const props = defineProps({
  data: Object
});

let total = ref(0)


const legendData = ref([
  {
    value: typeMoney.SZJC.lx,
    name: "大型车",
    originName: "大型车",
    unit: "",
    icon: iconPartSzjc,
    code: "SZJC",
    color: "#2C75F2",
  },
  {
    value: typeMoney.TDKF.lx,
    name: "小型车",
    unit: "",
    icon: iconPartTD,
    code: "TDKF",
    color: "#FF4D4F",
  },
  {
    value: typeMoney.OTHER.lx,
    name: "其它",
    unit: "",
    icon: iconPartQt,
    code: "OTHER",
    color: "#38C639",
  },
]);

watch(() => props.data, (newData) => {
      if (newData) {
        let num =0
        newData?.vehicleType.forEach(element => {
          num+=element?.num
        });
      total.value = num
      }
    });

const option = computed(() => {
  return {
    title: [{
      text: '今日车辆',
      x: 'center',
      top: '54%',
      textStyle: {
        color: '#9BA3AE',
        fontSize: 15,
        fontWeight: '100',
      }
    }, {
      text: total.value,
      x: 'center',
      top: '35%',
      textStyle: {
        fontSize: '20',
        color: '#FCE598',
        fontFamily: 'Lato',
        foontWeight: '600',
      },
    }],
    polar: {
      radius: ['74%', '80%'],
      center: ['50%', '50%'],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(66, 66, 66, .3)',
        },
        data: [100],
        coordinateSystem: 'polar',

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#F9C65A'
            }, {
              offset: 1,
              color: '#815326'
            }]),
          }
        }

      },
    ]
  };
});
</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;
  flex-direction: column;

  &_top {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #9BA3AE;

    span {
      font-weight: 600;
      font-size: 24px;
      color: #65E3F8;
    }
  }

  &_bottom {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    &>div {
      width: 50%;
    }
    .echart-box{
      height: 100%;
    }
    .connent-box {
      flex: 1;
      padding: 0px 50px;
      height: 50%;
      border-left: 1px solid #6c6c6d;

      &_top {

        background-image: linear-gradient(164deg, rgba(10, 71, 102, 0.65) 0%, rgba(26, 48, 64, 0.3) 100%);
        box-shadow: 1px 1px 1px rgba(19, 47, 64, 0.51), 1px 1px 1px #7397b0 inset;
      }

      &_bottom {
        margin-top: 10px;
        background-image: linear-gradient(164deg, rgba(102, 48, 10, 0.65) 0%, rgba(64, 45, 26, 0.30) 100%);
        box-shadow: 1px 1px 1px rgba(64, 41, 19, 0.51), 1px 1px 1px rgba(176, 142, 115, 1) inset;
      }

      &>div {
        color: #fff;
        width: 100%;
        height: 28px;
        border-radius: 14px;
        padding: 0 15px;
        line-height: 28px;
      }
    }

  }
}

::v-deep {
  .content-box {
    width: 50% !important;
  }
}
</style>
